<template>
  <div >
    <div  v-for="(v,i) in list1" :key='i'>
      <div class="shop-column col-xs-6 col-md-4" v-if="i<50">
        <img :src='v.goods_img' class="img-responsive" alt="product-image">
        <div class="shop-column-head">
          <h5>{{v.goods_name}}</h5>
        </div>
        <span class="shop-price">{{v.goods_price}}元</span>
        <div class="sim-button button8">
          <span @click='getGoodId(v.goods_id)'>BUY NOW</span>
        </div>
      </div>
      </div>
    </div>
</template>

<script>
  import {getGoodsList} from "@/api/data.js"
  export default {
    data() {
      return {
        list1: [],
        // page: 1
      }
    },
    methods: {
      getGoodId(goods_id){
        this.$router.push({path: '/shop_details/'+goods_id})
      },
      // created(){
      //   this.getGoodsList(this.page)
      // },
      getGoodsList(){
        getGoodsList()
        .then( 
        // 请求成功的处理方式
        res => {
            console.log(res.data)
            if(res.data.status_code==10000){
              this.list1 = res.data.data
            }else{
              console.log(res.data.message)
            }
            this.$Message.error("出错了");
        },
        // 请求失败时的处理方式 => 可省
        res => {
          console.log('error', res);
          
        }).catch(
          err => {
          console.log("出错了")
          console.log(err)
        })
        // catch 捕获同步异常(与tyr...except功能差不多) => 可省
      }
    },
    mounted(){
      this.getGoodsList();
    }
  }
</script>

<style>
  .shop-column {
    width: 30.6%;
    height: 450px;
    float: left;
    margin-bottom: 64px;
    margin-right: 23px;
    display:inline;
  }
  .col-md-8 {
    top: 9px;
    padding-left: 15px;
    margin-top: 35px;
    width: 100%;
  }
  .button8 {
    color: white;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    border: 0;
    position: relative;
  }
  .button8 span {
    color: white;
    z-index: 1;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
</style>
